import 'package:flutter/material.dart';
import '../common_widget/search.dart';
import 'adress_list/adress_list.dart';

class FrendPage extends StatefulWidget {
  @override
  _FrendPageState createState() => _FrendPageState();
}

class _FrendPageState extends State<FrendPage> {
  ScrollController _control;
  List officialAccounts = [
    {
      'title': '你有即将过期的绿色能量',
      'subtitle': '服务提醒|蚂蚁森林',
      'img': 'assets/images/p1.jpg',
      'updatetime': '上午 11:27',
      'messageCount': '88'
    },
    {
      'title': '生活号',
      'subtitle': '四川移动：全屋wifi全家升级全千兆',
      'img': 'assets/images/p2.jpg',
      'updatetime': '上午 11:27',
      'messageCount': '1'
    },
    {
      'title': '网商银行',
      'subtitle': '贷款逾期怎么自救',
      'img': 'assets/images/p3.jpg',
      'updatetime': '上午 11:27',
      'messageCount': '22'
    },
    {
      'title': '你有即将过期的绿色能量',
      'subtitle': '服务提醒|蚂蚁森林',
      'img': 'assets/images/p4.jpg',
      'updatetime': '上午 11:27',
      'messageCount': '12'
    },
    {
      'title': '支付宝账户安全险',
      'subtitle': '最高50元优惠等你来拿～',
      'img': 'assets/images/p5.jpg',
      'updatetime': '上午 11:27',
      'messageCount': '1'
    },
    {
      'title': '花呗',
      'subtitle': '换了花呗额度还未恢复？听我解释',
      'img': 'assets/images/p6.jpg',
      'updatetime': '上午 11:27',
      'messageCount': '1'
    },
    {
      'title': '交通出行',
      'subtitle': '[7条]100万份观影红包派发中，立即领取',
      'img': 'assets/images/p2.jpg',
      'updatetime': '上午 11:27',
      'messageCount': '7'
    },
    {
      'title': '肥猪旅行',
      'subtitle': '这里的春天最美丽！专属你的周末日历，一分钟出发',
      'img': 'assets/images/p1.jpg',
      'updatetime': '上午 11:27',
      'messageCount': '9'
    },
    {
      'title': '中国移动10086',
      'subtitle': '最后一天，5G爆款直降+福利活动！抢抢抢！',
      'img': 'assets/images/p1.jpg',
      'updatetime': '上午 11:27',
      'messageCount': '9'
    },
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        actions: <Widget>[
          Stack(
            children: <Widget>[
              Positioned(
                top: 12,
                right: 4,
                child: Container(
                  width: 10,
                  height: 10,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      color: Colors.red),
                ),
              ),
              IconButton(
                padding: EdgeInsets.only(top: 10),
                onPressed: () {
                  print('前往通讯录');
                  Navigator.push(context, MaterialPageRoute(builder: (_) {
                        return AdressListPage();
                      }));
                },
                icon: Icon(IconData(0xe607, fontFamily: 'iconFont')),
              ),
            ],
          ),
          IconButton(
            onPressed: () {},
            icon: Icon(IconData(0xe603, fontFamily: 'iconFont')),
          )
        ],
        title: Row(
          children: <Widget>[
            Container(
              child: Text(
                '消息(20)',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
      ),
      body: ListView.separated(
          controller: _control,
          physics: BouncingScrollPhysics(),
          itemBuilder: (context, index) {
            if (index == 0) {
              return _serve();
            } else {
              return Container(
                decoration: BoxDecoration(color: Colors.white),
                child: ListTile( // 
                leading: Stack(overflow: Overflow.visible, children: <Widget>[
                  Image.asset(officialAccounts[index - 1]['img']),
                  Positioned(
                    left: 36,
                    child: Container(
                      alignment: Alignment.center,
                      child: Text(
                        officialAccounts[index - 1]['messageCount'],
                        style: TextStyle(fontSize: 10, color: Colors.white),
                      ),
                      decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(12)),
                    ),
                    height: 12,
                    width:
                        officialAccounts[index - 1]['messageCount'].length > 1
                            ? 18.0
                            : 12.0,
                  )
                ]),
                title: Container(
                  child: Text(
                    officialAccounts[index - 1]['title'],
                    maxLines: 1,
                  ),
                  width: 422,
                ),
                subtitle: Container( // subtitle貌似不能定制长度，可能需要自己写个listtile
                  child: Text(
                    officialAccounts[index - 1]['subtitle'],
                    overflow: TextOverflow.ellipsis, // 文字显示不全样式
                    maxLines: 1,
                  ),
                  width: 422,
                ),
                trailing: Container(
                  child: Text(
                    officialAccounts[index - 1]['updatetime'],
                    style: TextStyle(color: Colors.grey),
                  ),
                  alignment: Alignment.topRight,
                  width: 150,
                  padding: EdgeInsets.only(top: 6),
                ),
              ),)  ;
            }
          },
          separatorBuilder: (context, index) {
            if (index > 1) {
              return Divider(
                color: Color.fromRGBO(22, 22, 22, 0.1),
                height: 0.5,
              );
            } else if (index == 1) {
              return Container(
                height: 6,
                decoration: BoxDecoration(color: Color.fromRGBO(22, 22, 22, 0.1)),
              );
            } else {
              return Container(
                height: 0,
              );
            }
          },
          itemCount: officialAccounts.length + 1),
    );
  }

  Widget _serve() {
    return Container(
      height: 68,
      child: Search(),
      decoration: BoxDecoration(color: Theme.of(context).primaryColor),
      padding: EdgeInsets.all(16),
    );
  }
}
